<template>
  <div class="collect">
    <MyHeader>
      <div slot="title">
        收藏
      </div>
    </MyHeader>
    <el-tabs v-model="activeName">
      <el-tab-pane label="作品" name="works">
        <div class="works-list" v-if="artWorkList.length > 0">
          <div class="works" v-for="(item, index) in artWorkList" :key="index" @mouseover="mouseoverWorks(item)" @mouseleave="mouseleaveWorks" @click="goDesc(item.work_id, item.work_type)">
            <div class="img-content">
              <el-image class="img" :src="item.work_info.thumbnail" alt="" fit="cover" />
            </div>
            <div class="title">
              {{ item.work_info.name }}
            </div>
            <div class="second-title">
              {{ item.work_info.art_name }}
            </div>
            <div class="collect">
              <img src="@/static/img/favorite_grey.png" alt="">
              {{ item.work_info.focus_total }}
            </div>
            <div class="cancel-collect" v-show="item.data_id === activeId" @click.stop="cancelCollect(item.data_id)">
              取消收藏
            </div>
          </div>
        </div>
        <el-empty v-else description="暂无数据"></el-empty>
        <!-- <Pagin
          ref="page"
          v-show="artWorkList && artWorkList.length !== 0"
          :func="getDataList"
          :pagesSizes="[10, 20, 30, 50]"
          :sizeNum="10"
          :layout="'prev, pager, next'"
          background
          :position="'center'"
          class="pagin"
        ></Pagin> -->
      </el-tab-pane>
      <el-tab-pane label="视频" name="video">
        <div v-if="videoList.length > 0" class="video-list">
          <div class="content" v-for="(item, index) in videoList" :key="index" @click="goDesc(item.work_info.work_id, item.work_info.work_type)">
            <div class="image">
              <img :src="item.img" alt="">
              <div class="time-long">
                <div class="mark" />
                <div class="text all-center">{{ item.timeLong }}</div>
              </div>
            </div>
            <div class="title">
              {{ item.title }}
            </div>
            <div class="foot">
              <span class="name">{{ item.name }}</span>
              <span class="date">{{ item.date }}</span>
              <span class="watch">{{ item.watch }}</span>
            </div>
          </div>
        </div>
        <el-empty v-else description="暂无数据"></el-empty>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Pagin from '@/components/pagin.vue'
import MyHeader from './common/myHeader.vue'
export default {
  name: '',
  middleware: 'checkToken',
  components: {
    MyHeader,
    Pagin
  },
  props: {},
  data () {
    return {
      artWorkList: [],
      videoList: [],
      activeName: 'works',
      activeId: ''
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.getFocusList()
  },
  methods: {
    getFocusList() {
      this.$api.getFocusList({}).then(res => {
        const result = Array.isArray(res.result.item_list) ? res.result.item_list : []
        this.artWorkList = result.filter(item => {
          return item.work_info.work_type == 1
        })
        this.videoList = result.filter(item => {
          return item.work_info.work_type == 2
        })
        // 这里要写接口然后把数据和total丢进去
        // callback(this.artWorkList, res.result.total_count)
      })
    },
    // 重置翻页组件的方法
    // refresh() {
    //   this.$refs.page.refresh()
    // },
    // getDataList(page, page_size, callback) {
    //   this.$api.getFocusList({}).then(res => {
    //     this.artWorkList = Array.isArray(res.result.item_list) ? res.result.item_list : []
    //     // 这里要写接口然后把数据和total丢进去
    //     callback(this.artWorkList, res.result.total_count)
    //   })
    // },
    goDesc(data_id, type) {
      if (type == 1) {
        this.$router.push({ path: '/artwork/desc', query: { data_id, workType: this.workType } })
      } else if (type == 2) {
        this.$router.push({ path: '/onlineVideo/desc', query: { data_id, type } })
      }
    },
    mouseoverWorks(item) {
      this.activeId = item.data_id
      console.log(item)
    },
    mouseleaveWorks() {
      this.activeId = ''
    },
    cancelCollect(data_id) {
      this.$api.cancelWorkFocus({ data_id }).then(res => {
        console.log(res)
        this.getFocusList()
      })
    }
  }
}
</script>

<style scoped lang="less">
.collect {
  ::v-deep(.el-tabs__item.is-active) {
    font-size: 20px;
    font-weight: 600;
    color: #000;
  }

  ::v-deep(.el-tabs__active-bar) {
    background: #000;
    bottom: -14px;
  }

  ::v-deep(.el-tabs__nav-scroll) {
    padding-left: 48px;
    height: 68px;
    display: flex;
    align-items: center;
  }

  ::v-deep(.el-tabs__item) {
    font-size: 20px;
    font-weight: 600;
    color: #999;
  }

  .works-list {
    padding: 40px 45px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    &::after {
      content: '';
      flex: 0 0 320px;
    }
  }

  .works {
    width: 320px;
    margin-bottom: 40px;
    position: relative;

    &:not(.upload-icon) {
      cursor: pointer;
    }

    &:nth-child(3n) {
      margin-right: 0;
    }

    .img-content {
      width: 100%;
      height: 240px;
      position: relative;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .cancel-collect {
      position: absolute;
      right: 0;
      bottom: 0;
    }

    .title {
      margin: 12px 0 8px;
      line-height: 16px;
      font-size: 16px;
      font-weight: 600;
      color: #000;
    }

    .second-title {
      line-height: 16px;
      font-size: 16px;
      font-weight: 600;
      color: #999;
      margin-bottom: 8px;
    }

    .collect {
      color: #999;
      font-size: 16px;
      line-height: 12px;

      img {
        // width: 30px;
        width: 16px;
        height: 16px;
        position: relative;
        top: -3px;
        margin-right: 9px;
      }
    }
  }

  .video-list {
    padding: 25px 48px;
    .content {
      width: 320px;
      margin-bottom: 40px;
      display: inline-block;
      margin-right: 42px;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .image {
        width: 320px;
        height: 240px;
        position: relative;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .title {
        font-size: 16px;
        font-weight: 600;
        color: #000;
        margin: 16px 0 12px;
      }

      .time-long {
        .mark,
        .text {
          width: 72px;
          height: 24px;
          position: absolute;
          right: 0;
          bottom: 0;
          font-size: 12px;
          color: #FFF;
        }

        .mark {
          background: #000;
          opacity: 0.5;
        }
      }

      .foot {
        line-height: 16px;
        font-size: 16px;
        font-weight: bold;
        color: #999;

        .watch {
          float: right;
        }
      }
    }
  }

  .pagin {
    background: #fff;
  }
}
</style>
